// 精品推荐区轮播图特效
(function () {
    // 得到id为'recommeng-left-btn','recommend-right-btn','recommend-nav-ul'标签的元素节点
    var recommend_left_btn = document.getElementById('recommend-left-btn');
    var recommend_right_btn = document.getElementById('recommend-right-btn');
    var recommend_nav_ul = document.getElementById('recommend-nav-ul');
    // 设置变量li3为recommend_nav_ul下标为0的子元素的克隆
    var li3 = recommend_nav_ul.children[0].cloneNode(true);
    // 将li3这个元素节点放到DOM树上
    recommend_nav_ul.appendChild(li3);
    // 设置变量li3_pic为选择器是'.recommend .bottom .nav-box ul li:nth-child(4) a .pic-box'的元素节点
    var li3_pic = document.querySelector('.recommend .bottom .nav-box ul li:nth-child(4) a .pic-box');
    // 将li3_pic的HTML内容改为'src="images/recommend4.png'
    li3_pic.innerHTML = '<img src="images/recommend4.png" alt="">';
    // 文字内容没有改变，因此不做更改
    // 以此类推，将包含剩余图片内容的li标签依次添加到HTML中
    var li4 = recommend_nav_ul.children[1].cloneNode(true);
    recommend_nav_ul.appendChild(li4);
    var li4_pic = document.querySelector('.recommend .bottom .nav-box ul li:nth-child(5) a .pic-box');
    li4_pic.innerHTML = '<img src="images/recommend5.png" alt="">';
    var li5 = recommend_nav_ul.children[2].cloneNode(true);
    recommend_nav_ul.appendChild(li5);
    var li5_pic = document.querySelector('.recommend .bottom .nav-box ul li:nth-child(6) a .pic-box');
    li5_pic.innerHTML = '<img src="images/recommend6.png" alt="">';
    var li6 = recommend_nav_ul.children[0].cloneNode(true);
    recommend_nav_ul.appendChild(li6);
    var li6_pic = document.querySelector('.recommend .bottom .nav-box ul li:nth-child(7) a .pic-box');
    li6_pic.innerHTML = '<img src="images/recommend7.png" alt="">';
    var li7 = recommend_nav_ul.children[1].cloneNode(true);
    recommend_nav_ul.appendChild(li7);
    var li7_pic = document.querySelector('.recommend .bottom .nav-box ul li:nth-child(8) a .pic-box');
    li7_pic.innerHTML = '<img src="images/recommend8.png" alt="">';
    var li8 = recommend_nav_ul.children[2].cloneNode(true);
    recommend_nav_ul.appendChild(li8);
    var li8_pic = document.querySelector('.recommend .bottom .nav-box ul li:nth-child(9) a .pic-box');
    li8_pic.innerHTML = '<img src="images/recommend9.png" alt="">';
    // 设置一个全局变量n，值为当前轮播图显示出的第一张图片所在的li标签元素节点的下标，值依次为0，1，2，3，4，5，6
    var n = 0;
    // // 设置一个变量lock，为一个函数节流锁
    var lock = true;
    // 给右按钮设置事件监听
    recommend_right_btn.onclick = function () {
        // 当lock为false时，退出函数
        if (!lock) return;
        lock = false;
        // 每当点击右按钮时让n的值加1
        n++;
        if (n > 6) n = 6;
        // 将轮播图列表的样式根据当前n的值设置left属性的值
        recommend_nav_ul.style.left = -n * 368.5 + 'px';
        // 设置一个定时器，在500ms后将lock的值变为true
        setTimeout(function () {
            lock = true;
        }, 500)
    }
    // 给左按钮设置事件监听
    recommend_left_btn.onclick = function () {
        if (!lock) return;
        lock = false;
        // 每当点击左按钮时让n的值减1
        n--;
        if (n < 0) n = 0;
        recommend_nav_ul.style.left = -n * 368.5 + 'px';
        setTimeout(function () {
            lock = true;
        }, 500)
    }
})();